﻿@page "/GridLayoutAdaptivity"
@inject NavigationManager NavigationManager

<div class="demo-description">
    <h2>
        <DemoNavLink Link="GridLayout#Adaptivity" />Adaptivity
    </h2>
    <p>
        You can use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxLayoutBreakpoint">DxLayoutBreakpoint</a> component to adapt a grid layout to different screen sizes.
    </p>
    <p>
        The code below does the following:
    </p>
    <ul>
        <li>Creates an <b>isXSmallScreen</b> data field.</li>
        <li>Adds a <b>DxGridLayout</b> component, uses named areas to arrange items, and adapts the layout for different screen sizes depending on the <b>isXSmallScreen</b> field value.</li>
        <li>Adds a <b>DxLayoutBreakpoint</b> component. The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxLayoutBreakpoint.DeviceSize">DeviceSize</a> property specifies the device size when the breakpoint should be activated. The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxLayoutBreakpoint.IsActive">IsActive</a> property is bound to the <b>isXSmallScreen</b> field. When the breakpoint is activated, the <b>IsActive</b> property and the bound <b>IsXSmallScreen</b> field equal <b>true</b>.</li>
    </ul>
</div>

<div class="demo-device-container @GetOrientation() mw-1100">
    <div class="demo-device-orientation-selector">
        <div>
            <button type="button" class="btn btn-secondary d-inline-flex align-items-center vertical @GetButtonOrientationSelector(Orientation.Vertical)" @onclick="() => ChangeOrientation(Orientation.Vertical)">
                <span class="mobile-view"></span>
            </button>
            <button type="button" class="btn btn-secondary d-inline-flex align-items-center horizontal @GetButtonOrientationSelector(Orientation.Horizontal)" @onclick="() => ChangeOrientation(Orientation.Horizontal)">
                <span class="mobile-view-horizontal"></span>
            </button>
        </div>
    </div>
    <div class="demo-device border border-secondary">
        <div class="demo-display border border-secondary">
            <iframe src="@NavigationManager.ToAbsoluteUri("GridLayout_AdaptivityIFrameContent")" title="GridLayout Adaptivity" />
        </div>
    </div>
</div>

<CodeSnippet_GridLayout_Adaptivity />

@code {
    Orientation orientation;

    string GetOrientation() {
        return orientation.ToString().ToLower();
    }
    void ChangeOrientation(Orientation orientation) {
        if(this.orientation == orientation) return;
        this.orientation = orientation;
        InvokeAsync(StateHasChanged);
    }
    string GetButtonOrientationSelector(Orientation orientation) {
        return this.orientation == orientation ? "active" : string.Empty;
    }
}
